<template>
  <div class="submi">
    <van-nav-bar
      title="支付"
      left-text="上一页"
      right-text="我的"
      left-arrow
      @click-left="onClickLeft"
      @click-right="onClickRight"
    />
    <!-- 选择地址单元格 -->
    <van-address-edit
      ref="address"
      :area-list="areaList"
      show-postal
      show-delete
      show-set-default
      :search-result="searchResult"
      :area-columns-placeholder="['请选择', '请选择', '请选择']"
      @save="onSave"
    />
    <van-submit-bar
      class="price"
      :price="30000"
      button-text="点击购买"
      @submit="onSubmit"
    >
    </van-submit-bar>
  </div>
</template>

<script>
import { Toast } from "vant";
import { areaList } from "@vant/area-data";
import { submitPost } from "../services/order.js";
export default {
  data() {
    return {
      areaList,
      show: false,
      searchResult: [],
    };
  },
  methods: {
    showPopup() {
      this.show = true;
    },
    onClickLeft() {
      this.$router.go(-1);
    },
    onClickRight() {
      this.$router.push({
        name: "User",
      });
    },
    onSave(v) {
      submitPost({
        products: JSON.parse(this.$route.query.pro),
        address: v.province + v.city + v.county,
        receiver: v.name,
      }).then((res) => {
        if (res.code === 1) {
          Toast("购买成功！");
          this.$router.push({
            name: "Order",
          });
        }
      });
    },
    onSubmit() {
      this.$nextTick(() => {
        this.$refs.address.onSave();
      });
    },
    onDelete() {
      Toast("delete");
    },
    onChangeDetail(val) {
      if (val) {
        this.searchResult = [
          {
            name: "",
            address: "",
          },
        ];
      } else {
        this.searchResult = [];
      }
    },
  },
};
</script>

<style scoped>
.address {
  height: 100px;
  display: flex;
  line-height: 100px;
  font-size: 14px;
}
/* 并没有错 不用管 */
>>> .van-address-edit__buttons {
  display: none !important;
}
</style>
